<template>
<div id="box">
  <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />

  <nav>
    <li v-for="(item) in productlist" :key="item.product.product_id">
      <input type="checkbox" :value="item.product.product_id" v-model="lineslist" @click="otherbox(item.product.product_id, $event)">
      <div class="img" v-if="item.product">
        <img :src="item.product.images[0].file" alt="">
      </div>
      <div class="info-body" v-if="item.product">
        <div class="title">{{item.product.title}}</div>
        <div class="quantity">数量：{{item.quantity}}</div>
        <button class="deleted" @click="deleted(item.product.product_id)">删除</button>
        <div class="pirce">总价：{{item.price * item.quantity}}</div>
      </div>
    </li>

  </nav>


  <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="allchecked">全选</van-checkbox>
    <van-button @click="deleteChecked">删选中</van-button>
    <template #tip>
      你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
    </template>
  </van-submit-bar>

</div>

</template>

<script>

import { mapState, mapMutations, mapActions} from "vuex";
import Ax from "../axios";
import deAx from "../../ProductDetail/axios"

const deax = new deAx()
const ax = new Ax()


export default {
  name: "basketlines",
  data(){
    return {
      lines:[],
      productlist:[],
      price:0

    }
  },
  computed:{
    ...mapState("basket", ["total_rmb", "deletedlines"]),
    ...mapState("basket",["allchecked"]),
    ...mapState("login", ["token"]),
    lineslist:{
      get(){
        return this.lines
      },
      set(val){
        this.lines = val
        if (val.length > this.productlist.length){
          this.changeAllCheck(false)
        }else if(val.length === this.productlist.length){
          this.changeAllCheck(true)
        }
      }
    },
    allchecked:{
      get(){
        return this.lines.length === this.productlist.length?true:false
      },
      set(val){
        if (val){
            //console.log(item.product.product_id)
              this.productlist.forEach(item=>{
                this.lines.push(item.product.product_id)

              })

            } else {
          this.lines = []
        }
      }
    }

  },
  watch:{
    lines(newstr){
      this.changeDeleteLines(newstr)
    }
  },
methods:{
    ...mapMutations("basket",["changeAllCheck", "changeTotalRmb", "changeBasketlength", "changeDeleteLines"]),
    ...mapActions("basket", ["changeTotalRmbSyce"]),
    deleteChecked(){
      //批量删除
      deax.makeDetail(this.token).then(response=>{
        ax.deleteBasketLines(response.data.id, this.deletedlines, this.token).then(response=>{
          if(response.status === 200){
            alert("删除成功")
          }
        })
      })

    },
    onClickLeft(){
      this.$router.go(-1)
    },
    otherbox(product_id, event){
    //点击设置选中
      deax.makeDetail(this.token).then(response=>{
        ax.putBasketLines(response.data.id, product_id, event.target.checked, this.token).then(response=>{
          if(response.status === 202){
            this.$router.go(0)
          }
        })
      })
    },
    onClickEditAddress(){
      //修改地址
    },
    onSubmit(){
      //提交订单
      this.$router.push({name:"address"})

    },

    deleted(product_id){
      //获取用户购物车
      deax.makeDetail(this.token).then(response=>{
        ax.deleteBasketLines(response.data.id, product_id, this.token).then(response=>{
          if(response.status === 200){
            this.$router.go(0)
          }
        })
      })
    }

  },




  created() {
    // 请求购物车
    //获取sessionstrog中的数据
    let username = window.sessionStorage.getItem("userInfo")
    ax.getBasketLines({"username": username}).then(response=>{
      this.productlist = response.data.data[0]?response.data.data[0].basket_lines:[]
      //设置默认选中
      this.productlist.forEach((item)=>{
        if (item.choice){
          this.lines.push(item.product.product_id)
        }
      })
      //修改总价
      this.changeTotalRmbSyce(response.data.data[0]?response.data.data[0].total_rmb:0)
      this.price = this.total_rmb * 100
    })
    if (this.lines.length === this.productlist.length){
      this.changeAllCheck(true)
    }
    //生成删除数组
    this.changeDeleteLines(this.lines)

  }
}
</script>

<style scoped lang="less">
#box{
  background: gainsboro;
  padding-bottom: 30px;
  .van-button{
    border-radius: 2px;
  }
  nav{
    list-style: none;
    overflow: hidden;

    li{
      background: white;
      height: 80px;
      width: 95%;
      margin: 0 auto;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      .img{
        height: 85%;
        width: 75px;
        img{
          height: 100%;
          width: 100%;
        }
      }
      .info-body{
        width: 60%;
        height: 100%;
        position: relative;
        .title{
          position: absolute;
          width: 100px;
          font-size: 15px;
          top:20px
        }
        .pirce{
          position: absolute;
          right: 10px;
          top:55px;
          color: red;
          font-size: 15px;


        }
        .quantity{
          position: absolute;
          font-size: 15px;
          bottom: 10px;
          color: grey;
        }
        .deleted{
          position: absolute;
          right: 20px;
          top:15px;
          background: red;
          border-radius: 2px;
          color: white;
          width: 40px;
          height: 20px;

        }
      }
    }
  }

}




</style>